<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CodePractice - 编程学习平台</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background-color: #f9f9f9;
            color: #333;
            line-height: 1.6;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }
        
        /* 导航栏样式 */
        header {
            background-color: #fff;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            position: sticky;
            top: 0;
            z-index: 100;
        }
        
        nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 0;
        }
        
        .logo {
            display: flex;
            align-items: center;
            font-weight: 700;
            font-size: 1.5rem;
            color: #1a73e8;
        }
        
        .logo-icon {
            margin-right: 8px;
            font-size: 1.8rem;
        }
        
        .nav-links {
            display: flex;
            list-style: none;
        }
        
        .nav-links li {
            margin-left: 30px;
        }
        
        .nav-links a {
            text-decoration: none;
            color: #555;
            font-weight: 500;
            transition: color 0.3s;
        }
        
        .nav-links a:hover {
            color: #1a73e8;
        }
        
        .auth-buttons {
            display: flex;
            align-items: center;
        }
        
        .btn {
            padding: 8px 20px;
            border-radius: 4px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s;
            text-decoration: none;
        }
        
        .btn-login {
            color: #1a73e8;
            margin-right: 15px;
        }
        
        .btn-signup {
            background-color: #1a73e8;
            color: white;
        }
        
        .btn-signup:hover {
            background-color: #0d62c9;
        }
        
        /* 主内容区样式 */
        .hero {
            padding: 80px 0;
            text-align: center;
        }
        
        .hero h1 {
            font-size: 2.8rem;
            margin-bottom: 20px;
            color: #1a1a1a;
        }
        
        .hero p {
            font-size: 1.2rem;
            max-width: 700px;
            margin: 0 auto 40px;
            color: #555;
        }
        
        .cta-button {
            background-color: #1a73e8;
            color: white;
            padding: 12px 30px;
            font-size: 1.1rem;
            border-radius: 6px;
            display: inline-block;
        }
        
        .cta-button:hover {
            background-color: #0d62c9;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(26, 115, 232, 0.3);
        }
        
        /* 功能卡片区 */
        .features {
            padding: 70px 0;
            background-color: #fff;
        }
        
        .section-title {
            text-align: center;
            margin-bottom: 50px;
            font-size: 2rem;
            color: #1a1a1a;
        }
        
        .cards {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 30px;
        }
        
        .card {
            flex: 1;
            min-width: 300px;
            background-color: #f8f9fa;
            border-radius: 8px;
            padding: 30px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
            transition: transform 0.3s;
        }
        
        .card:hover {
            transform: translateY(-5px);
        }
        
        .card-icon {
            font-size: 2.5rem;
            color: #1a73e8;
            margin-bottom: 20px;
        }
        
        .card h3 {
            margin-bottom: 15px;
            color: #1a1a1a;
        }
        
        .card p {
            color: #666;
        }
        
        /* 底部区域 */
        footer {
            background-color: #1a1a1a;
            color: #fff;
            padding: 50px 0 20px;
        }
        
        .footer-content {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            margin-bottom: 40px;
        }
        
        .footer-column {
            flex: 1;
            min-width: 200px;
            margin-bottom: 30px;
        }
        
        .footer-column h4 {
            margin-bottom: 20px;
            font-size: 1.2rem;
        }
        
        .footer-column ul {
            list-style: none;
        }
        
        .footer-column ul li {
            margin-bottom: 10px;
        }
        
        .footer-column a {
            color: #ccc;
            text-decoration: none;
            transition: color 0.3s;
        }
        
        .footer-column a:hover {
            color: #1a73e8;
        }
        
        .copyright {
            text-align: center;
            padding-top: 20px;
            border-top: 1px solid #333;
            color: #999;
            font-size: 0.9rem;
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            .nav-links {
                display: none;
            }
            
            .hero h1 {
                font-size: 2.2rem;
            }
            
            .hero p {
                font-size: 1rem;
            }
            
            .cards {
                flex-direction: column;
            }
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <header>
        <div class="container">
            <nav>
                <div class="logo">
                    <span class="logo-icon">💻</span>
                    <span>CodePractice</span>
                </div>
                
                <ul class="nav-links">
                    <li><a href="#">首页</a></li>
                    <li><a href="#">题目</a></li>
                    <li><a href="#">讨论</a></li>
                    <li><a href="#">竞赛</a></li>
                    <li><a href="#">文章</a></li>
                </ul>
                
                <div class="auth-buttons">
                    <a href="#" class="btn btn-login">登录</a>
                    <a href="#" class="btn btn-signup">注册</a>
                </div>
            </nav>
        </div>
    </header>

    <!-- 主内容区 -->
    <main>
        <section class="hero">
            <div class="container">
                <h1>提升你的编程技能</h1>
                <p>通过解决精心设计的编程题目，准备技术面试，提升编码能力，开启你的编程之旅</p>
                <a href="/all_questions" class="btn cta-button">开始练习</a>
            </div>
        </section>

        <section class="features">
            <div class="container">
                <h2 class="section-title">为什么选择我们？</h2>
                <div class="cards">
                    <div class="card">
                        <div class="card-icon">📚</div>
                        <h3>海量题库</h3>
                        <p>超过2000道编程题目，覆盖各种难度和主题，从基础算法到高级数据结构</p>
                    </div>
                    <div class="card">
                        <div class="card-icon">⚡</div>
                        <h3>高效学习</h3>
                        <p>智能推荐系统根据你的水平和目标提供个性化练习计划，最大化学习效率</p>
                    </div>
                    <div class="card">
                        <div class="card-icon">🏆</div>
                        <h3>竞赛挑战</h3>
                        <p>参加每周编程竞赛，与全球开发者同台竞技，提升解决实际问题的能力</p>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- 底部区域 -->
    <footer>
        <div class="container">
            <div class="footer-content">
                <div class="footer-column">
                    <h4>产品</h4>
                    <ul>
                        <li><a href="#">题目</a></li>
                        <li><a href="#">竞赛</a></li>
                        <li><a href="#">面试准备</a></li>
                        <li><a href="#">学习计划</a></li>
                    </ul>
                </div>
                <div class="footer-column">
                    <h4>公司</h4>
                    <ul>
                        <li><a href="#">关于我们</a></li>
                        <li><a href="#">职业机会</a></li>
                        <li><a href="#">博客</a></li>
                        <li><a href="#">隐私政策</a></li>
                    </ul>
                </div>
                <div class="footer-column">
                    <h4>社区</h4>
                    <ul>
                        <li><a href="#">讨论区</a></li>
                        <li><a href="#">开发者</a></li>
                        <li><a href="#">合作伙伴</a></li>
                        <li><a href="#">社交媒体</a></li>
                    </ul>
                </div>
                <div class="footer-column">
                    <h4>支持</h4>
                    <ul>
                        <li><a href="#">帮助中心</a></li>
                        <li><a href="#">常见问题</a></li>
                        <li><a href="#">联系我们</a></li>
                    </ul>
                </div>
            </div>
            <div class="copyright">
                <p>© 2023 CodePractice. 保留所有权利。</p>
            </div>
        </div>
    </footer>
</body>
</html>